<template>
  <div id="story">
    <!-- 上方图片 -->
    <div class="f1">
      <div class="container">
        <img
          src="https://img.fishfay.com/theme/images/antacom/contact/topbg-20191120.jpg
"
          alt=""
        />
        <div class="text">
          <h3>联系我们</h3>
          <p>我们愿意为您提供帮助</p>
          <p>400-885-6000</p>
        </div>
      </div>
    </div>
    <!-- 下方地图 -->
    <div class="f2">
      <div class="container">
        <div class="block">
          <!-- 左侧地图 -->
          <div id="left"></div>
          <!-- 右侧地址信息 -->
          <div class="right">
            <div class="inner">
              <h4>晋江总部</h4>
              <P
                ><span>地址：</span
                ><span>福建省晋江市池店镇东山工业区安踏总部大厦</span></P
              >
              <P><span>电话：</span><span>86-595 8592 9999</span></P>
              <P><span>传真：</span><span>86-595 8592 8989</span></P>
              <P><span>邮编：</span><span>362212</span></P>
            </div>
          </div>
        </div>
        <div class="block">
          <!-- 左侧地图 -->
          <div id="left2">
            <img
              src="	https://img.fishfay.com/theme/images/antacom/contact/location-xm.jpg"
              alt=""
            />
          </div>
          <!-- 右侧地址信息 -->
          <div class="right">
            <div class="inner">
              <h4>厦门营运中心</h4>
              <p>
                <span>地址：</span
                ><span>福建省厦门市思明区观音山嘉义路99号安踏运营中心</span>
              </p>
              <p><span>电话：</span><span>86-592-3518989</span></p>
              <p><span>传真：</span><span>86-592-6305678</span></p>
              <p><span>邮编：</span><span>361009</span></p>
            </div>
          </div>
        </div>
        <div class="block">
          <!-- 左侧地图 -->
          <div id="left2">
            <img
              src="https://img.fishfay.com/theme/images/antacom/contact/location-hk.jpg"
            />
          </div>
          <!-- 右侧地址信息 -->
          <div class="right">
            <div class="inner">
              <h4>香港办事处</h4>
              <p>
                <span>地址：</span
                ><span>香港九龙九龙湾宏泰道23号 Manhattan Place 16楼</span>
              </p>
              <p><span>电话：</span><span>(852) 2116 1660</span></p>
              <p><span>传真：</span><span>(852) 2116 1590</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "771f1a4970aa9d3913703540cb639819", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Marker"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("left", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 12, //初始化地图级别
          center: [118.576462, 24.873878], //初始化地图中心点位置
        });
        let map = new Amap.Map("left");
        // 创建一个 Marker 实例：
        map.addControl(
          new Amap.Marker({
            position: new AMap.LngLat(118.57, 24.87),
          })
        );
        var marker = new AMap.Marker({
          position: new AMap.LngLat(118.57, 24.87), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        });
        map.add(marker);
      });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>
<style  scoped src="../assets/css/contact.css">
</style>